<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}/start/layui/css/layui.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_name_alert.css">
</script>
<div class="layui-alert-box">
    <div class="layui-alert-box">
        <div class="layui-alert-title">
            <span class="layui-title-inner">巡检项目选择</span>
            <span class="layui-title-screen">
              <div class="screen-btn">
                <form action="" class="layui-form">
                  <input type="search" name="keyWord" class="search-blank-inner searchInput" placeholder="搜索" autocomplete="off"/>
                  <button type="button" lay-submit lay-filter="queryTableProject" class="search-blank-icon"></button>
                </form>
              </div>
          </span>
        </div>
        <div class="layui-content">
            <div class="con1 toggle-btn">
                <span class="screen">
                <i class="query-icon  layui-icon"></i> 
            <span class="query-inner">查询条件</span>
                </span>
                <i class="icon layui-icon layui-icon-down" id="open"></i>
            </div>
            <div class="con2 layui-form toggle-content">
                <div class="layui-form-item">
                    <label class="layui-form-label">设备编号:</label>
                    <div class="layui-input-block">
                        <input type="text" list="student_one" name="title" required autocomplete="off" class="layui-input" id="ipt1">
                        <datalist id="student_one"></datalist>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" list="student_two" required autocomplete="off" class="layui-input" id="ipt2">
                        <datalist id="student_two"></datalist>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" list="student_three" required autocomplete="off" class="layui-input" id="ipt3">
                        <datalist id="student_three"></datalist>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="query layui-btn layui-btn-radius layui-btn-primary" lay-submit>
                    <span class="search-icon"></span>
                    <span class="btn-inner">查询</span>
                </button>
                    </div>
                </div>
            </div>
            <div id="table-box">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
        <div class="footer layui-btn-containner">
            <button class="btn1 layui-btn layui-btn-radius layui-btn-primary">添加</button>
            <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
        </div>
    </div>
    <script src="./start/layui/layui.js"></script>
    <script>
        layui.use(['table', 'laypage', 'form', 'jquery', 'laytpl', 'tree'], function() {
            var table = layui.table;
            var admin = layui.admin;
            var view = layui.view;
            var laypage = layui.laypage;
            var $ = layui.jquery;
            var laytpl = layui.laytpl;
            var tree = layui.tree;
            var setter = layui.setter;
            var treeSelect = layui.treeSelect;
            var router = layui.router();
            var id = router.search.id;
            $('.footer').on('click', 'button', function() {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });
            // $(document).ready(function() {
            $('#ipt1').focus(function(data) {
                $.ajax({
                    url: 'http://192.168.0.111:8081/fia/selectFia01.json',
                    type: 'post',
                    async: true,
                    data: {
                        fia01: $(this).val()
                    },
                    success: function(data) {
                        var str = ''
                        for (let index = 0; index < data.data.length; index++) {
                            str = str + `<option value="${data.data[index].fia01}">${data.data[index].fia01}</option>`
                        }
                        $('#student_one').empty()
                        $('#student_one').append(str)
                    }
                });
            });
            $('#ipt2').focus(function(data) {
                $.ajax({
                    url: 'http://192.168.0.111:8081/fil/selectAllFia02.json',
                    type: 'post',
                    async: true,
                    data: {
                        fia02: $('#ipt2').val()
                    },
                    success: function(data) {
                        var str = ''
                        for (let index = 0; index < data.data.length; index++) {
                            if (data.data[index] == null) {
                                continue
                            } else if (data.data[index].fia02 != null) {
                                str = str + `<option value="${data.data[index].fia02}">${data.data[index].fia02}</option>`
                            }

                        }
                        $('#student_two').empty()
                        $('#student_two').append(str)
                    }
                });
            });
            $('#ipt3').focus(function(data) {
                $.ajax({
                    url: 'http://192.168.0.111:8081/fia/selectFiaPmc01.json',
                    type: 'post',
                    async: true,
                    data: {
                        pmc081: $('#ipt3').val()
                    },
                    success: function(data) {
                        var str = ''
                        for (let index = 0; index < data.data.length; index++) {
                            str = str + `<option value="${data.data[index].pmc081}">${data.data[index].pmc01} ${data.data[index].pmc081}</option>`
                        }
                        $('#student_three').empty()
                        $('#student_three').append(str)
                    }
                });
            });
            // $(".con2").toggle(50);
            $('body').on('click', '#open', function() {
                if ($('.toggle-content').hasClass('toggle-content-on')) {
                    $('.toggle-content').removeClass('toggle-content-on');
                    $('.con1').find('.layui-icon-up').addClass('layui-icon-down').removeClass('layui-icon-up')
                } else {
                    $('.toggle-content').addClass('toggle-content-on');
                    $('.con1').find('.layui-icon-down').addClass('layui-icon-up').removeClass('layui-icon-down')
                }
            })
            render();

            function render(data) {
                table.render({
                    elem: '#demo',
                    url: 'http://192.168.0.111:8081/fil/FilFileDBSelectFiaFiles.json',
                    method: 'post',
                    contentType: 'application/json',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    height: 240,
                    id: 'tableOne',
                    where: data,
                    page: false,
                    limit: 9999999,
                    request: {
                        pageName: 'pageNum' //页码的参数名称，默认：page
                            ,
                        limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    },
                    cols: [
                        [ //表头
                            {
                                type: 'checkbox',
                                width: 30
                            }, {
                                field: 'fia01',
                                title: '设备编号',
                                width: 100
                            }, {
                                field: 'fia02',
                                title: '设备名称',
                                width: 90
                            }, {
                                field: 'fic02',
                                title: '设备类型名称',
                                width: 110
                            }, {
                                field: 'pmc081',
                                title: '供应商',
                                width: 200
                            }, {
                                field: 'tcSeriesName',
                                title: '设备系列',
                                width: 110
                            }, {
                                field: 'fii02',
                                title: '设备型号',
                                width: 90
                            }, {
                                field: 'fia011',
                                title: '原资产编号',
                                width: 90
                            }, {
                                field: 'azp02',
                                title: '原所属公司',
                                width: 90
                            }, {
                                field: 'gem02',
                                title: '原负责部门',
                                width: 90
                            }, {
                                field: 'gen02',
                                title: '原负责人',
                                width: 90
                            }, {
                                field: 'tcFlrName',
                                title: '设备位置',
                                width: 200
                            }
                        ]
                    ],
                });
            }
            $('.con2').on('click', '.query', function() {
                var data = {
                    fia01: $('#ipt1').val() ? $('#ipt1').val() : null,
                    fia02: $('#ipt2').val() ? $('#ipt2').val() : null,
                    fia09: $('#ipt3').val() ? $('#ipt3').val() : null
                };
                render(data)
            })

            // });
        });
    </script>